<template>
	<!-- add dialog -->
	<div class="addDiglog">
		<el-form :model="addForm" ref="ruleForm" label-width="100px" class="addForm">
			<el-row :gutter="20" class="tp">
			  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
				  <!-- input -->
				  <el-form-item v-if="v.type == 'input'" :label="v.label">
					<el-input size="mini" :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]" placeholder="请输入内容"
					@blur="inputChance(v,i)"></el-input>
				  </el-form-item>
				  <!-- select -->
				  <el-form-item v-if="v.type == 'select'" :label="v.label">
					<el-select v-model="$data.addForm[v.modelValue]" placeholder="请选择" size="mini">
						<el-option v-for="item in $data[v.op]" :key="item.value" :label="item.label" :value="item"> 
						<span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
					</el-select>
				  </el-form-item>
				  <!-- checked -->
				  <el-form-item v-if="v.type == 'checked'" :label="v.label">
					<el-checkbox v-model="$data.addForm[v.modelValue]"></el-checkbox>
				  </el-form-item>
				  <!-- date -->
				  <el-form-item v-if="v.type == 'date'">
					  <template>
						  <div slot="label" style="width: 98px;">{{ v.label }}</div>
					  </template>
					<el-date-picker class="autoWidth" size="mini"
					type="date" placeholder="选择时间" v-model="$data.addForm[v.modelValue]"></el-date-picker>
				  </el-form-item>
			  </el-col>
			</el-row>
			<!-- 内嵌addtable -->
			<div class="addFormTable bt">
			<!-- 挂号类别表格 -->
				<div class="header">
					<div><span style="color: #fff;margin-left: 12px;">挂号类别</span></div>
					<div><el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :icon="v.icon" @click="handClick(i)">{{ v.title }}</el-button></div>
				</div>
				<el-table :data="tableData" border>
					<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name"></el-table-column>
					<!-- fixed -->
					<el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
					<!-- edit -->
					<el-table-column fixed="right" label="操作" width="88">
					  <template slot-scope="scope">
						  <div class="editbox" style="text-align: center;">
							<el-button type="text" @click="editFormValue(scope.row)" size="mini">编辑</el-button>
							<el-button type="text" @click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
						  </div>
					  </template>
					</el-table-column>
				</el-table>
			</div>
		</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button size="mini" type="primary" @click="dialogVisible = false">保存</el-button>
		    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
		  </span>
	</div>
</template>

<script>
	import AccType from './AccType.js'
	export default{
		components:{
			AccType
		},
		data(){
			return{
				// str
				
				//arr
				formType:[],
				tableData:[],
				headerBtn:[{ add:"add", title:"", type:"text", icon:"el-icon-plus" },{ adit:"adit", title:"", type:"text", icon:"el-icon-edit" }, { del:"del", title:"", type:"text", icon:"el-icon-delete" }],
				tableRows:[{ name:"挂号类别", prop:"deptName", type:"" },{ name:"金额", prop:"mainDep", type:"" },{ name:"主要类别", prop:"specialtyName", type:"" }],
				//blean
				disabled:false,
				//obj
				addForm:{
					birthday:'',
					patientName:'',
					creationTime:'',
				},
				
			}
		},
		mounted() {
			// 提交表单格式
			this.formType = AccType.map(function(v) {
				return v
			})
		},
		methods:{
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 打开新增挂号类别model
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						console.log('2')
						break;
				}
			},


		}
	}
</script>

<style lang="less" scoped>
	/deep/ .el-dropdown{
		font-size: 14px;
		cursor: pointer;
	}
	/deep/ .el-dropdown:hover {
		font-weight: bold;
		color: #66b1ff;
	}
	/deep/ .el-icon--right{
		// background-color: #66b1ff;
	}
	/deep/ .el-popper[x-placement^=bottom]{
		margin-top: 0;
	}
	.addDiglog{
		.addForm{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border: 1px solid #efefef;
			margin: -12px 0 12px 0;
			padding: 12px;
			.tp{
				
			}
			.addFormTable{
				.header{
					background-color: #007bb0;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
		.dialog-footer{
			display: flex;
			justify-content: right;
		}
	}
</style>